import React from 'react';

export interface LabelWithIconProps {
  icon?: React.ReactNode;
  name: string;
  onDragStart: (x: number, y: number) => void;
  onDrag: (x: number, y: number) => void;
}

export const LabelWithIcon: React.FC<LabelWithIconProps> = ({
  icon,
  name,
  onDragStart,
  onDrag,
}) => {
  const dragging = React.useRef(false);

  const handleMouseDown = (e: React.MouseEvent) => {
    dragging.current = true;
    onDragStart(e.clientX, e.clientY);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!dragging.current) {
      return;
    }

    onDrag(e.clientX, e.clientY);
  };

  const handleMouseUp = () => {
    dragging.current = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return (
    <div
      className='flex items-center gap-1 p-1 cursor-move select-none bg-white border border-gray-300 rounded shadow-sm'
      onMouseDown={handleMouseDown}
    >
      {icon}
      {name}
    </div>
  );
};
